<template>
  <div class="playground">
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         width="591"
         height="383"
    >
      <image x="0" y="0" width="100%" height="100%"
             xlink:href="../../assets/image/playerGround/playground.png"
             preserveAspectRatio="xMinYMin meet"/>

      <!--注意:不同svg的图的marker的id不能重复
          而且需要加v-if判断,使用当前marker才定义-->
      <!--直塞的末端三角形-->
      <defs >
        <marker v-if="my_accurate_through_ball" id="through-pass-arrow" markerWidth="15" markerHeight="14" refX="3" refY="5" orient="auto">
          <path d="M2,2 L2,8 L9,5 L2,2" style="fill: #1A936F;"/>
        </marker>
      </defs>
      <!--长传的末端三角形-->
      <defs >
        <marker v-if="my_accurate_long_ball" id="long-pass-arrow" markerWidth="15" markerHeight="14" refX="3" refY="5" orient="auto">
          <path d="M2,2 L2,8 L9,5 L2,2" style="fill: #1A936F;"/>
        </marker>
      </defs>
      <!--关键传球的末端三角形-->
      <defs >
        <marker v-if="my_key_pass" id="key_pass-arrow" markerWidth="15" markerHeight="14" refX="3" refY="5" orient="auto">
          <path d="M2,2 L2,8 L9,5 L2,2" style="fill: #1A936F;"/>
        </marker>
      </defs>
      <!--助攻的末端三角形-->
      <defs >
        <marker v-if="my_assist" id="assist-arrow" markerWidth="15" markerHeight="14" refX="3" refY="5" orient="auto">
          <path d="M2,2 L2,8 L9,5 L2,2" style="fill: #BD1E1E;"/>
        </marker>
      </defs>
      <!--盘带的末端三角形-->
      <defs >
        <marker v-if="my_dribble" id="dribble-arrow" markerWidth="15" markerHeight="14" refX="3" refY="5" orient="auto">
          <path d="M2,2 L2,8 L9,5 L2,2" style="fill: #1A936F;"/>
        </marker>
      </defs>

      <!--注意:不同svg的图的marker的id不能重复-->
      <!--成功直塞-->
      <line v-if="my_accurate_through_ball"
            v-for="item in my_accurate_through_ball"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-width:2;"
            marker-end="url(#through-pass-arrow)" />

      <!--失败直塞-->
      <line v-if="my_inaccurate_through_ball"
            v-for="item in my_inaccurate_through_ball"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-dasharray:8,4;stroke-width:2;"
            marker-end="url(#through-pass-arrow)" />

      <!--成功长传-->
      <line v-if="my_accurate_long_ball"
            v-for="item in my_accurate_long_ball"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-width:2;"
            marker-end="url(#long-pass-arrow)" />

      <!--失败长传-->
      <line v-if="my_inaccurate_long_ball"
            v-for="item in my_inaccurate_long_ball"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-dasharray:8,4;stroke-width:2;"
            marker-end="url(#long-pass-arrow)" />

      <!--关键传球-->
      <line v-if="my_key_pass"
            v-for="item in my_key_pass"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-width:2;"
            marker-end="url(#key_pass-arrow)" />

      <!--助攻-->
      <line v-if="my_assist"
            v-for="item in my_assist"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#BD1E1E;stroke-width:2;"
            marker-end="url(#assist-arrow)" />

      <!--定义 重获球权的橙色星星-->
      <defs>
        <image id="regain" x="0" y="0" width="7%" height="7%"
               xlink:href="../../assets/image/shot/regain.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--重获球权的橙色星星-->
      <use v-if="my_regain"
           v-for="item in my_regain"
           :x="item.x1" :y="item.y1" xlink:href="#regain" />

      <!--定义 成功解围的蓝色方形-->
      <defs>
        <image id="clearance" x="0" y="0" width="6%" height="6%"
               xlink:href="../../assets/image/shot/shotSquare.png"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--成功解围的蓝色方形-->
      <use v-if="my_clearance"
           v-for="item in my_clearance"
           :x="item.x1" :y="item.y1" xlink:href="#clearance" />
      <!--成功过人的蓝色方形-->
      <use v-if="my_break_through"
           v-for="item in my_break_through"
           :x="item.x1" :y="item.y1" xlink:href="#clearance" />
      <!--被犯规的蓝色方形-->
      <use v-if="my_fouled"
           v-for="item in my_fouled"
           :x="item.x1" :y="item.y1" xlink:href="#clearance" />

      <!--定义 失败解围的红色边框方形-->
      <defs>
        <image id="failedClearance" x="0" y="0" width="6%" height="6%"
               xlink:href="../../assets/image/shot/failedClearance.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--失败解围的红色边框方形-->
      <use v-if="my_failed_clearance"
           v-for="item in my_failed_clearance"
           :x="item.x1" :y="item.y1" xlink:href="#failedClearance" />

      <!--失败过人的红色边框方形-->
      <use v-if="my_failed_break_through"
           v-for="item in my_failed_break_through"
           :x="item.x1" :y="item.y1" xlink:href="#failedClearance" />

      <!--定义 成功抢断的绿色菱形-->
      <defs>
        <image id="interception" x="0" y="0" width="6%" height="6%"
               xlink:href="../../assets/image/shot/diamond.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>

      <!--成功抢断的绿色菱形-->
      <use v-if="my_interception"
           v-for="item in my_interception"
           :x="item.x1" :y="item.y1" xlink:href="#interception" />
      <!--成功触球的绿色菱形-->
      <use v-if="my_success_touch"
           v-for="item in my_success_touch"
           :x="item.x1" :y="item.y1" xlink:href="#interception" />

      <!--定义 失败抢断的绿色边框菱形-->
      <defs>
        <image id="failedInterception" x="0" y="0" width="6%" height="6%"
               xlink:href="../../assets/image/shot/failedInterception.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--失败抢断的绿色菱形-->
      <use v-if="my_failed_interception"
           v-for="item in my_failed_interception"
           :x="item.x1" :y="item.y1" xlink:href="#failedInterception" />
      <!--失败抢断的绿色菱形-->
      <use v-if="my_failed_touch"
           v-for="item in my_failed_touch"
           :x="item.x1" :y="item.y1" xlink:href="#failedInterception" />

      <!--定义 空中对抗的红色叉叉-->
      <defs>
        <image id="aerialBattle" x="0" y="0" width="6%" height="6%"
               xlink:href="../../assets/image/shot/fork.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--空中对抗的红色叉叉-->
      <use v-if="my_aerial_battle"
           v-for="item in my_aerial_battle"
           :x="item.x1" :y="item.y1" xlink:href="#aerialBattle" />

      <!--致命失误的红色叉叉-->
      <use v-if="my_fetal_error"
           v-for="item in my_fetal_error"
           :x="item.x1" :y="item.y1" xlink:href="#aerialBattle" />

      <!--盘带-->
      <line v-if="my_dribble"
            v-for="item in my_dribble"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-width:2;"
            marker-end="url(#dribble-arrow)" />

      <!--定义 被抢断的红色实心圆-->
      <defs>
        <image id="intercepted" x="0" y="0" width="6%" height="6%"
               xlink:href="../../assets/image/shot/intercepted.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--被抢断的红色实心圆-->
      <use v-if="my_intercepted"
           v-for="item in my_intercepted"
           :x="item.x1" :y="item.y1" xlink:href="#intercepted" />


    </svg>
  </div>
</template>

<script>
  export default {
    name: "PlayGround",
    props:{
      //成功直塞
      my_accurate_through_ball:{
        type:Array
      },
      //失败直塞
      my_inaccurate_through_ball:{
        type:Array
      },
      //成功长传
      my_accurate_long_ball:{
        type:Array
      },
      //失败长传
      my_inaccurate_long_ball:{
        type:Array
      },
      //关键传球
      my_key_pass:{
        type:Array
      },
      //助攻
      my_assist:{
        type:Array
      },
      //重获球权
      my_regain:{
        type:Array
      },
      //成功解围
      my_clearance:{
        type:Array
      },
      //失败解围
      my_failed_clearance:{
        type:Array
      },
      //成功抢断
      my_interception:{
        type:Array
      },
      //失败抢断
      my_failed_interception:{
        type:Array
      },
      //空中对抗
      my_aerial_battle:{
        type:Array
      },
      //盘带
      my_dribble:{
        type:Array
      },
      //成功过人
      my_break_through:{
        type:Array
      },
      //失败过人
      my_failed_break_through:{
        type:Array
      },
      //致命失误
      my_fetal_error:{
        type:Array
      },
      //被犯规
      my_fouled:{
        type:Array
      },
      //被抢断
      my_intercepted:{
        type:Array
      },
      //成功触球
      my_success_touch:{
        type:Array
      },
      //失败触球
      my_failed_touch:{
        type:Array
      },
    },
    data(){
      return {
        players:[
          {number:1,name:'球员1',x1:'10%',y1:'10%'},
          {number:2,name:'球员2',x1:'20%',y1:'20%'},
          {number:3,name:'球员3',x1:'30%',y1:'30%'},
          {number:4,name:'球员4',x1:'40%',y1:'40%'},
          {number:5,name:'球员4',x1:'50%',y1:'50%'},
          {number:6,name:'球员4',x1:'60%',y1:'60%'},
          {number:7,name:'球员4',x1:'70%',y1:'70%'},
        ],
      }
    },
    watch:{
      positionData:{

      }
    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods:{

    },
  }
</script>

<style scoped>
 .playground {
   position: relative;
   width: 591px;
   height: 383px;
   margin-top: 5px;
 }
</style>